<template>
  <div>
    <li class="todo" :class="{completed:todo.completed,editing:editng}">
      <div class="view">
        <input class="toggle" type="checkbox" :checked="todo.completed" @change="amendChk(todo)" />
        <label v-text="todo.text" @dblclick="Isinp"></label>
        <button class="destroy" @click="remove(todo)"></button>
      </div>
      <input
        class="edit"
        type="text"
        :value="todo.text"
        v-focus
        @keydown.esc="back"
        @keydown.enter="amendText"
        @blur="amendText"
      />
    </li>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  props: ["todo"],
  data() {
    return {
      editng: false
    };
  },
  methods: {
    ...mapActions("todo", ["amendTex", "remove", "amendChk"]),
    // 双击显示
    Isinp() {
      this.editng = true;
      console.log(this.editng);
    },
    // 双击修改
    amendText(e) {
      if (!e.target.value) {  //为空删除此数据
        this.remove(this.todo);
        this.editng = false;
        return;
      }
      this.amendTex({ todo: this.todo, text: e.target.value });
      this.editng = false;
    },
    back() {
      this.editng = false;
    }
  },
  directives: {
    focus: {
      update(el) {
        el.focus();
      }
    }
  }
};
</script>

<style scoped>

</style> 